<template>
  <div class="app-container">
    <el-card class="content-edit">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="后台配置" name="system">
          <system-config ref="system"/>
        </el-tab-pane>
        <el-tab-pane label="小程序配置" name="wxapp">
          <wxapp-config ref="wxapp"/>
        </el-tab-pane>
        <el-tab-pane label="短信配置" name="sms">
          <sms-config ref="sms"/>
        </el-tab-pane>
        <el-tab-pane label="腾讯云配置" name="tencentCloud">
          <tencent-cloud-config ref="tencentCloud"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import SystemConfig from './system';
  import WxappConfig from './wxapp';
  import SmsConfig from './sms';
  import TencentCloudConfig from './tencentCloud';
  export default {
    name: 'CustomerServiceTelephone',
    components: {SystemConfig, WxappConfig, SmsConfig, TencentCloudConfig},
    data() {
      return {
        activeName: 'system',
        form: {}
      }
    },
    mounted(){
      this.loadData();
    },
    methods: {
      handleClick(tab) {
        this.activeName = tab.name;
        this.loadData()
      },
      // 加载数据
      loadData() {
        if (this.activeName === 'system') {
          this.$refs.system.loadData();
        } else if (this.activeName === 'wxapp') {
          this.$refs.wxapp.loadData();
        } else if (this.activeName === 'sms') {
          this.$refs.sms.loadData();
        } else if (this.activeName === 'tencentCloud') {
          this.$refs.tencentCloud.loadData();
        }
      }
    }
  }
</script>
